<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>动态路由匹配 | Vue Router</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="static/picture/logo.png">
    <link rel="apple-touch-icon" href="https://v3.router.vuejs.org/icons/apple-touch-icon-152x152.png">
    <link rel="mask-icon" href="https://v3.router.vuejs.org/icons/safari-pinned-tab.svg" color="#3eaf7c">
    <meta name="description" content="Vue.js 官方的路由管理器。">
    <meta name="wwads-cn-verify" content="7e7757b1e12abcb736ab9a754ffb617a">
    <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
    
    <link rel="preload" href="static/css/0.styles.136ede33.css" as="style"><link rel="preload" href="https://v3.router.vuejs.org/assets/js/app.5cb068d1.js" as="script"><link rel="preload" href="https://v3.router.vuejs.org/assets/js/4.1430b5a5.js" as="script"><link rel="preload" href="https://v3.router.vuejs.org/assets/js/3.51f41756.js" as="script"><link rel="preload" href="https://v3.router.vuejs.org/assets/js/116.d3be25ed.js" as="script"><link rel="preload" href="https://v3.router.vuejs.org/assets/js/7.b1ef01fe.js" as="script"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/10.31570374.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/100.f5a92b3f.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/101.ee7125f5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/102.d6663468.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/103.52eae1a0.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/104.c3f7f210.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/105.eeea8ced.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/106.1c26feed.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/107.45f15a23.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/108.67b3498d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/109.0d861fad.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/11.23ce75fe.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/110.817be425.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/111.1ff37cf8.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/112.0f4bcc2b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/113.33f197d8.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/114.59d11efc.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/115.e29513c5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/117.520112d7.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/118.4e8860bf.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/119.822915fe.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/12.f9f5c1d4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/120.64de5730.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/121.d14483d6.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/122.809b1d6c.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/123.dfafa172.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/124.e1cdb337.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/125.093b479c.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/13.db1acc91.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/14.17c88755.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/15.6700843a.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/16.84949dd1.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/17.8f87f2ef.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/18.90f9825b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/19.196286e9.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/20.8a2eefe0.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/21.9e49382e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/22.0bdc0b6f.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/23.83b61690.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/24.445c95b4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/25.40493d84.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/26.2a95a52d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/27.1856a4c3.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/28.9f6e959e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/29.06df98c9.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/30.be9a3758.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/31.2751df13.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/32.3df6388b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/33.73d91d13.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/34.42fa6d43.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/35.92c4dbe0.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/36.3cb64f0d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/37.d00b8ad5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/38.8cfdc40e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/39.663f424b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/40.d5721761.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/41.0dd61abe.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/42.d09ca009.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/43.539e190a.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/44.7907e586.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/45.273a044f.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/46.8680fbf0.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/47.f68a4eb9.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/48.3616928b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/49.bf7cdfd5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/5.2d9bb619.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/50.ec7d6bdf.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/51.6c2151bf.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/52.b853c8bc.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/53.14dd74fd.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/54.63232eeb.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/55.9582f69a.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/56.4b1cd6ef.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/57.a027b996.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/58.07b675b0.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/59.bb8da942.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/6.02bc56cd.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/60.67d68613.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/61.f5eb4a0d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/62.d0da6098.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/63.c3bfaec4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/64.56511c8c.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/65.b0d60684.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/66.e066bc4d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/67.fdc123f4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/68.b78eaac4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/69.ab78abab.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/70.6ca6222a.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/71.442171e5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/72.12cba91d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/73.258ad65e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/74.42a25693.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/75.dcf907be.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/76.39d8dfc2.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/77.ef3ec9f9.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/78.4c82cfbf.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/79.b5d92855.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/8.dee4ab51.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/80.d55e87d6.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/81.cf409eab.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/82.fd3a33a6.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/83.0e5cf847.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/84.28b2a6b8.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/85.3a729073.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/86.c985b80b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/87.62964e61.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/88.ceb8b07d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/89.2c0b86ae.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/9.a79fac11.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/90.b80f9f69.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/91.ecc4a957.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/92.2165392e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/93.de463e4e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/94.b595fcb4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/95.5eb09d5f.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/96.221390cd.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/97.4daa1cf5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/98.860a2ac1.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/99.33c3adae.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/vendors~docsearch.2dc030f4.js">
    <link rel="stylesheet" href="static/css/0.styles.136ede33.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="main-container" data-v-84121532=""><div class="theme-container" data-v-84121532=""><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewbox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="index4.html" class="home-link router-link-active"><!----> <span class="site-name">Vue Router</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="index10.html" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="index11.html" class="nav-link">
  API 参考
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="v3.x" class="dropdown-title"><span class="title">v3.x</span> <span class="arrow down"></span></button> <button type="button" aria-label="v3.x" class="mobile-dropdown-title"><span class="title">v3.x</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="index1.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  v4.x
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  更新记录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">选择语言</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  English
</a></li><li class="dropdown-item"><!----> <a href="" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  简体中文
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  日本語
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Русский
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  한국어
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Français
</a></li></ul></div></div> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="index10.html" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="index11.html" class="nav-link">
  API 参考
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="v3.x" class="dropdown-title"><span class="title">v3.x</span> <span class="arrow down"></span></button> <button type="button" aria-label="v3.x" class="mobile-dropdown-title"><span class="title">v3.x</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="index1.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  v4.x
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  更新记录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">选择语言</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  English
</a></li><li class="dropdown-item"><!----> <a href="" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  简体中文
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  日本語
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Русский
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  한국어
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Français
</a></li></ul></div></div> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <div class="sponsors sponsors-top" data-v-84121532=""><span data-v-84121532="">Platinum Sponsors</span> <a href="javascript:;" target="_blank" rel="noopener" data-v-84121532=""><img src="https://posva-sponsors.pages.dev/logos/fincliplogo_black_svg.svg" alt="Finogeeks" data-v-84121532=""></a></div> <ul class="sidebar-links"><li><a href="installation2.html" class="sidebar-link">安装</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="index10.html" aria-current="page" class="sidebar-link">起步</a></li><li><a href="" aria-current="page" class="active sidebar-link">动态路由匹配</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="#响应路由参数的变化" class="sidebar-link">响应路由参数的变化</a></li><li class="sidebar-sub-header"><a href="#捕获所有路由或-404-not-found-路由" class="sidebar-link">捕获所有路由或 404 Not found 路由</a></li><li class="sidebar-sub-header"><a href="#高级匹配模式" class="sidebar-link">高级匹配模式</a></li><li class="sidebar-sub-header"><a href="#匹配优先级" class="sidebar-link">匹配优先级</a></li></ul></li><li><a href="nested-routes2.html" class="sidebar-link">嵌套路由</a></li><li><a href="navigation2.html" class="sidebar-link">编程式的导航</a></li><li><a href="named-routes2.html" class="sidebar-link">命名路由</a></li><li><a href="named-views2.html" class="sidebar-link">命名视图</a></li><li><a href="redirect-and-alias2.html" class="sidebar-link">重定向和别名</a></li><li><a href="passing-props2.html" class="sidebar-link">路由组件传参</a></li><li><a href="history-mode2.html" class="sidebar-link">HTML5 History 模式</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="navigation-guards2.html" class="sidebar-link">导航守卫</a></li><li><a href="meta2.html" class="sidebar-link">路由元信息</a></li><li><a href="transitions2.html" class="sidebar-link">过渡动效</a></li><li><a href="data-fetching2.html" class="sidebar-link">数据获取</a></li><li><a href="scroll-behavior2.html" class="sidebar-link">滚动行为</a></li><li><a href="lazy-loading2.html" class="sidebar-link">路由懒加载</a></li><li><a href="navigation-failures2.html" class="sidebar-link">导航故障</a></li></ul></section></li></ul> <div class="sponsors" data-v-84121532=""><span data-v-84121532="">Sponsors</span> <a href="javascript:;" target="_blank" rel="noopener" data-v-84121532=""><img src="https://posva-sponsors.pages.dev/logos/vuejobs.svg" alt="VueJobs" data-v-84121532=""></a></div></aside> <main class="page"><div class="carbon-ads" data-v-84121532=""></div> <div class="theme-default-content content__default"><h1 id="动态路由匹配"><a href="#动态路由匹配" class="header-anchor">#</a> 动态路由匹配</h1> <div class="vueschool"><a href="javascript:;" target="_blank" rel="sponsored noopener" title="Learn how to match dynamic routes with Vue School">观看 Vue School 的如何匹配动态路由的免费视频课程 (英文)</a></div> <p>我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 <code>User</code> 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 <code>vue-router</code> 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> User <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">'&lt;div&gt;User&lt;/div&gt;'</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token comment">// 动态路径参数 以冒号开头</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/user/:id'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> User <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>现在呢，像 <code>/user/foo</code> 和 <code>/user/bar</code> 都将映射到相同的路由。</p> <p>一个“路径参数”使用冒号 <code>:</code> 标记。当匹配到一个路由时，参数值会被设置到
<code>this.$route.params</code>，可以在每个组件内使用。于是，我们可以更新 <code>User</code> 的模板，输出当前用户的 ID：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> User <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">'&lt;div&gt;User {{ $route.params.id }}&lt;/div&gt;'</span>
<span class="token punctuation">}</span>
</code></pre></div><p>你可以看看这个<a href="javascript:;" target="_blank" rel="noopener noreferrer">在线例子<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p>你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 <code>$route.params</code> 中。例如：</p> <table><thead><tr><th>模式</th> <th>匹配路径</th> <th>$route.params</th></tr></thead> <tbody><tr><td>/user/:username</td> <td>/user/evan</td> <td><code>{ username: 'evan' }</code></td></tr> <tr><td>/user/:username/post/:post_id</td> <td>/user/evan/post/123</td> <td><code>{ username: 'evan', post_id: '123' }</code></td></tr></tbody></table> <p>除了 <code>$route.params</code> 外，<code>$route</code> 对象还提供了其它有用的信息，例如，<code>$route.query</code> (如果 URL 中有查询参数)、<code>$route.hash</code> 等等。你可以查看 <a href="index11.html#路由对象">API 文档</a> 的详细说明。</p> <h2 id="响应路由参数的变化"><a href="#响应路由参数的变化" class="header-anchor">#</a> 响应路由参数的变化</h2> <p>提醒一下，当使用路由参数时，例如从 <code>/user/foo</code> 导航到 <code>/user/bar</code>，<strong>原来的组件实例会被复用</strong>。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。<strong>不过，这也意味着组件的生命周期钩子不会再被调用</strong>。</p> <p>复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) <code>$route</code> 对象：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> User <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">'...'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">watch</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">$route</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> <span class="token keyword">from</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 对路由变化作出响应...</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>或者使用 2.2 中引入的 <code>beforeRouteUpdate</code> <a href="navigation-guards2.html">导航守卫</a>：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> User <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">'...'</span><span class="token punctuation">,</span>
  <span class="token function">beforeRouteUpdate</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// react to route changes...</span>
    <span class="token comment">// don't forget to call next()</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="捕获所有路由或-404-not-found-路由"><a href="#捕获所有路由或-404-not-found-路由" class="header-anchor">#</a> 捕获所有路由或 404 Not found 路由</h2> <p>常规参数只会匹配被 <code>/</code> 分隔的 URL 片段中的字符。如果想匹配<strong>任意路径</strong>，我们可以使用通配符 (<code>*</code>)：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
  <span class="token comment">// 会匹配所有路径</span>
  <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'*'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">{</span>
  <span class="token comment">// 会匹配以 `/user-` 开头的任意路径</span>
  <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'/user-*'</span>
<span class="token punctuation">}</span>
</code></pre></div><p>当使用<em>通配符</em>路由时，请确保路由的顺序是正确的，也就是说含有<em>通配符</em>的路由应该放在最后。路由 <code>{ path: '*' }</code> 通常用于客户端 404 错误。如果你使用了<em>History 模式</em>，请确保<a href="history-mode2.html">正确配置你的服务器</a>。</p> <p>当使用一个<em>通配符</em>时，<code>$route.params</code> 内会自动添加一个名为 <code>pathMatch</code> 参数。它包含了 URL 通过<em>通配符</em>被匹配的部分：</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 给出一个路由 { path: '/user-*' }</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/user-admin'</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>pathMatch <span class="token comment">// 'admin'</span>
<span class="token comment">// 给出一个路由 { path: '*' }</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/non-existing'</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>pathMatch <span class="token comment">// '/non-existing'</span>
</code></pre></div><h2 id="高级匹配模式"><a href="#高级匹配模式" class="header-anchor">#</a> 高级匹配模式</h2> <p><code>vue-router</code> 使用 <a href="javascript:;" target="_blank" rel="noopener noreferrer">path-to-regexp<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。查看它的<a href="javascript:;" target="_blank" rel="noopener noreferrer">文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>学习高阶的路径匹配，还有<a href="javascript:;" target="_blank" rel="noopener noreferrer">这个例子 <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>展示 <code>vue-router</code> 怎么使用这类匹配。</p> <h2 id="匹配优先级"><a href="#匹配优先级" class="header-anchor">#</a> 匹配优先级</h2> <p>有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="index10.html" class="prev router-link-active">
        起步
      </a></span> <span class="next"><a href="nested-routes2.html">
        嵌套路由
      </a>
      →
    </span></p></div> <div class="bsa-cpc-wrapper" data-v-84121532=""><div class="bsa-cpc"></div></div></main></div></div><div class="global-ui"><!----></div></div>
    <script src="static/js/app.5cb068d1.js" defer=""></script><script src="static/js/4.1430b5a5.js" defer=""></script><script src="static/js/3.51f41756.js" defer=""></script><script src="static/js/116.d3be25ed.js" defer=""></script><script src="static/js/7.b1ef01fe.js" defer=""></script>
  </body>
</html>
